<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- 
        vue3中，运行结果，控制台提示：
        vue.js:1629 [Vue warn]: Property "formatDate" was accessed during render but is not defined on instance. 

        将filters改为methods就可以。vue3不支持过滤器写法，用函数表达式，计算属性替代。
  at <App>

    在 3.x中，过滤器已移除，且不再支持。取而代之的是，我们建议用方法调用或计算属性来替换它们。
     -->
    <div id="app">
        <!-- {{mytime | formatDate}} -->
        {{formatDate(mytime)}}
    </div>
    <script>
        var obj = {
            data() {
                return {
                    mytime: 1707066066399
                }
            },
            // filters: {
            //     formatDate(value) {
            //         var mydate = new Date(value)
            //         return mydate.getFullYear() + '-' + (mydate.getMonth() + 1) + '-' + mydate.getDate() + ' ' + mydate.getHours() + ':' + mydate.getMinutes() + ':' + mydate.getSeconds()

            //     }
            // },
            methods: {
                formatDate(value) {
                    var mydate = new Date(value)
                    return mydate.getFullYear() + '-' + (mydate.getMonth() + 1) + '-' + mydate.getDate() + ' ' + mydate.getHours() + ':' + mydate.getMinutes() + ':' + mydate.getSeconds()
                }
            }
        }
        Vue.createApp(obj).mount('#app')
    </script>
</body>

</html>